<template>
  <div v-loading="loading">
    <!-- tab -->
    <el-tabs style="margin-top: -30px;" v-model="activeTab" @tab-click="handleTabChange">
      <el-tab-pane v-for="item in tabs" :key="item.value" :label="item.label" :name="item.value"></el-tab-pane>
    </el-tabs>
    <!-- filter -->
    <div class="d-flex ai-center mb10">
      <div class="mw20">自动刷新结果</div>
      <el-select
        class="ml20"
        v-model="filters.date"
        placeholder="请选择"
        size="small"
        style="width: 120px;"
        @change="handleSearch"
      >
        <el-option v-for="item in dateOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-select
        class="ml20"
        v-model="filters.status"
        placeholder="请选择"
        size="small"
        style="width: 120px;"
        @change="handleSearch"
      >
        <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-button class="ml20" type="primary" round size="mini" @click="handleSearch">查询</el-button>
    </div>
    <!-- table -->
    <el-table
      class="table"
      :data="tableData"
      :row-class-name="({ row, rowIndex }) => (rowIndex % 2 === 0 ? '' : 'cell-bg')"
      header-cell-class-name="header-cell-bg"
      height="400"
      size="mini"
    >
      <el-table-column
        v-for="item in tableOptions"
        :key="item.id"
        :label="item.label"
        :prop="item.prop"
        :width="item.width"
        :min-width="item.minWidth"
      >
        <template slot-scope="{ row }">
          <span v-if="item.prop">{{ row[item.prop] }}</span>

          <span v-if="item.id === 'TABLE_TIME'" class="text-blue">{{ row.refreshTime }}</span>

          <span v-if="item.id === 'TABLE_COUNT'">自动刷新1套</span>

          <span v-if="item.id === 'TABLE_STATUS'" :class="getColorByStatus(row.status)">
            {{ getContentByStatus(row.status, row.errMsg) }}
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getServerTime } from '@/utils/serverTime';
import { format, subDays } from 'date-fns';
export default {
  name: 'RefreshLog',

  components: {},

  filters: {},

  inject: {
    rootPort: {
      default() {
        return {};
      }
    }
  },

  props: {},

  data() {
    this.statusColorMap = {
      S: 'text-green',
      F: 'text-red',
      W: 'text-gray'
    };
    this.statusContentMap = {
      S: '已完成',
      F: '失败',
      W: '待执行'
    };
    this.tabs = [
      { label: '二手房', value: 'SALES' },
      { label: '租房', value: 'RENT' }
    ];
    this.statusOptions = [
      { value: 'A', label: '全部状态' },
      { value: 'S', label: '已完成' },
      { value: 'F', label: '失败' },
      { value: 'W', label: '待执行' }
    ];
    this.tableOptions = [
      { id: 'TABLE_TIME', label: '时间', width: '140' },
      { id: 'TABLE_COUNT', label: '刷新次数', width: '160' },
      { id: 'TABLE_STATUS', label: '状态', minWidth: '200' },
      { id: 'TABLE_NUM', prop: 'portHouNum', label: '房源编号', width: '140' }
    ];
    this.today = 0;
    return {
      loading: false,
      activeTab: 'SALES',
      filters: {
        date: '',
        status: 'A'
      },
      dateOptions: [],
      tableData: []
    };
  },

  computed: {},

  watch: {},

  beforeMount() {},

  mounted() {
    this.initDateOptions().then(() => {
      this.getAutoRefreshLogList();
    });
  },

  methods: {
    // ------------------handle------------------
    handleSearch() {
      this.getAutoRefreshLogList();
    },
    handleTabChange() {
      this.filters = {
        date: this.today,
        status: 'A'
      };
      this.getAutoRefreshLogList();
    },
    // ------------------function------------------
    // 状态匹配文字颜色
    getColorByStatus(value) {
      return this.statusColorMap[value] || '';
    },
    // 状态匹配文字
    getContentByStatus(value, msg) {
      return `${this.statusContentMap[value] || ''}${value === 'F' && msg ? '(' + msg + ')' : ''}`;
    },
    // 初始化时间筛选
    initDateOptions() {
      return new Promise(async (resolve, reject) => {
        let res = await getServerTime();
        this.today = format(res, 'yyyy-MM-dd');
        this.filters.date = this.today;
        this.dateOptions = [...new Array(5).keys()].map((item, index) => {
          if (index === 0) {
            return { value: this.today, label: '今天' };
          } else {
            let date = format(subDays(res, index), 'yyyy-MM-dd');
            return { value: date, label: date };
          }
        });
        resolve();
      });
    },
    async getAutoRefreshLogList() {
      try {
        this.loading = true;
        const { filters, activeTab } = this;
        const res = await this.$api.getAutoRefreshLogList({
          delegationType: activeTab,
          userPortId: this.rootPort.portInfo.id || '',
          refreshDate: filters.date,
          status: filters.status
        });
        this.tableData = res.content || [];
      } catch (error) {
        console.log('error', error);
      } finally {
        this.loading = false;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import '~@/styles/colors.scss';
@import '~@/styles/mixin.scss';

.table {
  & /deep/ .header-cell-bg {
    background: $light-blue;
  }

  & /deep/ .cell-bg {
    background: $lightest-blue;
  }

  & /deep/ td {
    border-bottom: none;
  }

  &::before {
    height: 0;
  }

  & /deep/ .el-table__body-wrapper {
    @include scrollBar;
  }
}
</style>
